<template>
  <view id="app">
    <!-- 全局加载提示 -->
    <view v-if="globalLoading" class="global-loading">
      <view class="loading-overlay">
        <view class="loading-content">
          <view class="loading-spinner">
            <view class="spinner"></view>
          </view>
          <text class="loading-text">加载中...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'App',
  computed: {
    ...mapState('app', ['globalLoading'])
  },
  onLaunch: function () {
    console.log('App Launch')
    this.initApp()
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  methods: {
    ...mapActions('user', ['loadUserInfo']),
    async initApp() {
      // 1. 检查并加载本地用户信息
      try {
        await this.loadUserInfo()
        console.log('App init: UserInfo loaded from storage.')
      } catch (error) {
        console.log('App init: No local user info found or token invalid.')
      }

      // 2. 获取系统信息
      try {
        const systemInfo = await uni.getSystemInfo()
        this.$store.commit('app/SET_SYSTEM_INFO', systemInfo)
      } catch (e) {
        console.error('获取系统信息失败', e)
      }
      
      // 3. 监听网络状态
      uni.onNetworkStatusChange(res => {
        console.log('网络状态改变:', res.networkType)
        this.$store.commit('app/SET_NETWORK_TYPE', res.networkType)
      });
      
      try {
        const res = await uni.getNetworkType()
        this.$store.commit('app/SET_NETWORK_TYPE', res.networkType)
      } catch (e) {
        console.error('获取网络状态失败', e)
      }
    }
  }
}
</script>

<style lang="scss">
/* 暂时注释掉uView样式，避免编译错误 */
/* @import 'uview-ui/index.scss'; */

/* 全局样式 */
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
}

/* 通用类 */
.container {
  padding: 20rpx;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.margin-top-sm {
  margin-top: 20rpx;
}

.margin-top-md {
  margin-top: 40rpx;
}

.margin-top-lg {
  margin-top: 60rpx;
}

.margin-bottom-sm {
  margin-bottom: 20rpx;
}

.margin-bottom-md {
  margin-bottom: 40rpx;
}

.margin-bottom-lg {
  margin-bottom: 60rpx;
}

.padding-sm {
  padding: 20rpx;
}

.padding-md {
  padding: 40rpx;
}

.padding-lg {
  padding: 60rpx;
}

.border-radius {
  border-radius: 12rpx;
}

.shadow {
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 主题色彩 */
.primary-color {
  color: #007AFF;
}

.success-color {
  color: #4CD964;
}

.warning-color {
  color: #FF9500;
}

.error-color {
  color: #FF3B30;
}

.info-color {
  color: #8E8E93;
}

.primary-bg {
  background-color: #007AFF;
}

.success-bg {
  background-color: #4CD964;
}

.warning-bg {
  background-color: #FF9500;
}

.error-bg {
  background-color: #FF3B30;
}

.white-bg {
  background-color: #FFFFFF;
}

/* 文字大小 */
.text-xs {
  font-size: 24rpx;
}

.text-sm {
  font-size: 28rpx;
}

.text-md {
  font-size: 32rpx;
}

.text-lg {
  font-size: 36rpx;
}

.text-xl {
  font-size: 40rpx;
}

.text-xxl {
  font-size: 48rpx;
}

/* 字体粗细 */
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* 行高 */
.leading-tight {
  line-height: 1.2;
}

.leading-normal {
  line-height: 1.5;
}

.leading-loose {
  line-height: 1.8;
}

/* 省略号 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 全局加载样式 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    
    .loading-content {
      background-color: rgba(0, 0, 0, 0.8);
      border-radius: 12rpx;
      padding: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .loading-spinner {
        margin-bottom: 20rpx;
        
        .spinner {
          width: 60rpx;
          height: 60rpx;
          border: 4rpx solid rgba(255, 255, 255, 0.3);
          border-top: 4rpx solid #ffffff;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
      }
      
      .loading-text {
        color: #ffffff;
        font-size: 28rpx;
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 